<template>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <div class="header-left">
                            <a href="javascript:;">
                                <img src="//cimg.zhaopin.cn/img/newIndexImages/logo.png" alt="">
                            </a>
                        </div>
                    </div>
                </el-col>
                <el-col :span="18">
                    <div class="grid-content bg-purple-light">
                        <div class="header-right">
                            <div>
                                <a href="javascript:;" @click="backhome">
                                <span class="el-icon-s-home"></span>
                                首页
                            </a>
                            </div>
                            <div>
                                <a href="javascript:;">
                                <span class="el-icon-s-data"></span>
                                文章列表
                            </a>
                            </div>
                            <div>
                                您好！ xx用户
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <div class="title_img">
                标题图片
            </div>
            <div class="upload_photo">
                <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary" class="select_file">选取文件</el-button>
                    <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </div>
            <div class="article">
                <el-form :model="addArticleForm" :rules="addArticleRuleForm" ref="addArticleFormRef">
                    <el-form-item prop="articleTitle" label="文章标题">
                        <el-input placeholder="请输入内容" v-model="addArticleForm.articleTitle" clearable >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="栏目" prop="region">
                        <el-select v-model="addArticleForm.region" placeholder="请选择栏目...">
                            <el-option label="java" value="java"></el-option>
                            <el-option label="c++" value="c++"></el-option>
                            <el-option label="python" value="python"></el-option>
                            <el-option label="javascript" value="javascript"></el-option>
                            <el-option label="c#" value="c#"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="文章正文" prop="desc">
                        <el-input type="textarea" v-model="addArticleForm.desc" rows="8"></el-input>
                    </el-form-item>
                    <el-button type="primary">立即发表</el-button>
                </el-form>
            </div>
        </el-main>
        <el-footer>
            <div class="footer-header">
            <p>联系方式：976829111@qq.com</p>
            <p>联系地址：广东省江门市五邑大学11栋206</p>
            </div>
        </el-footer>
    </el-container>
</template>

<script>
export default {
    data() {
        return{
            //栏目的选择
            menulist: {
                name1: 'java',
                name2: 'c++',
                name3: 'python',
                name4: 'javascript',
                name5: 'c语言',
            },
            //验证规则
            addArticleRuleForm: {
                articleTitle: [
                    { required: true, message: '请输入登录名称', trigger: 'blur' },
                ],
                
            },
            //文章内容表单
            addArticleForm: {
                articleTitle: '',
                region: '',
            },
            //选择的图片
            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
        }
    },
    methods: {
        submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      backhome() {

      }
    }
}
</script>

<style lang="less" scoped>
        .el-header{
        
        background-color: #000;
        .header-left{
            margin-top: 12px;
           
        }
        .header-right{
            float: right;
            margin-right: 250px;
             div{    
                float: left;   
                font-size: 16px;
                height: 60px;
                line-height: 60px;
                margin-right: 40px;
                color: #fff;
                a{
                    text-decoration: none;
                    color: #fff;
                }
            }
        }
    }
    .el-main{
        position: relative;
        width: 1140px;
        height: 800px;
        margin: 20px auto 0px;
        background-color: #eee;
        .title_img{
            position: absolute;
            top: 30px;
            left: 20px;
        }
        .upload_photo{
            position: absolute;
            top:65px;
            left: 20px;
            .select_file{
                margin-left: -123px;
            }
        }
        .article{
            position: absolute;
            top:200px;
            left: 20px;
            .el-input{
                width: 1050px;
            }
            .el-select{
                width: 1050px;
            }
            .el-button{
                margin-right: -950px;
            }
        }
        
    }
    .el-footer{
        margin-top: 20px;
        background-color: #333;
        
        p{
            margin: auto auto;
            color: #fff;
        }
    }
</style>